<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务日志列表</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>    .content-section {
        width: 100%;
        margin: 0 auto;
    }

    #taskLogTable {
        width: 100%;
        border-collapse: collapse;
    }

    #taskLogTable td, #taskLogTable th {
        padding: 0.5rem;
        vertical-align: middle;
        border: 1px solid #dee2e6;
    }

    #taskLogTable thead th {
        background-color: #f0f0f0;
        text-align: left;
    }

    #taskLogPagination {
        display: flex;
        justify-content: center;
        margin-top: 2rem;
    }

    #taskLogPagination .page-item.active .page-link {
        color: #fff;
        background-color: #0d6efd;
        border-color: #0d6efd;
    }

    #taskLogPagination .page-link {
        position: relative;
        display: block;
        padding: 0.5rem 0.75rem;
        margin-left: -1px;
        line-height: 1.25;
        color: #0d6efd;
        background-color: #fff;
        border: 1px solid #dee2e6;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    #taskLogPagination .page-link:hover {
        z-index: 2;
        color: #0a58ca;
        text-decoration: none;
        background-color: #e9ecef;
        border-color: #dee2e6;
    }
    </style>
</head>
<body class="bg-light">
<div class="container py-4">
    <div class="row justify-content-center">
        <div class="col-lg-10 col-md-10">
            <!-- 搜索框 -->
            <div class="mb-8">
                <form class="d-flex align-items-center" id="searchForm">
                    <input type="text" class="form-control me-2" id="searchName" placeholder="搜索名称">
                    <button class="btn btn-outline-primary" type="button" id="searchButton">搜索</button>
                </form>
            </div>

            <!-- 任务日志表格 -->
            <table class="table table-hover" id="taskLogTable">
                <thead>
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">名称</th>
                    <th scope="col">信息</th>
                    <th scope="col">创建时间</th>
                </tr>
                </thead>
                <tbody id="taskLogList">
                <!-- 动态加载的任务日志数据行将放在这里 -->
                </tbody>
            </table>

            <!-- 美化后的分页导航 -->
            <nav aria-label="任务日志分页导航" id="taskLogPagination">
                <!-- 动态生成的分页按钮将放在这里 -->
            </nav>
        </div>
    </div>
</div>

<!-- 引入jQuery和Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>

<script>
    $(document).ready(function () {
        let currentPage = 1;
        let searchKeyword = '';

        // 加载初始任务日志列表
        loadTaskLogs(currentPage, searchKeyword);

        // 搜索按钮点击事件
        $('#searchButton').click(function () {
            searchKeyword = $('#searchName').val();
            currentPage = 1;
            loadTaskLogs(currentPage, searchKeyword);
        });

        // 加载任务日志列表的方法
        function loadTaskLogs(page, keyword) {
            $.ajax({
                url: 'http://119.3.239.188:56085/sailing/taskLog',
                method: 'GET',
                data: { page: page, name: keyword },
                success: function (response) {
                    if (response.code === 0) {
                        displayTaskLogs(response.data.records);
                        displayPagination(response.data.current, response.data.pages);
                    } else {
                        alert('加载任务日志失败：' + response.message);
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.error('请求失败：', textStatus, ', 错误：', errorThrown);
                    alert('请求失败，请检查网络或后端接口状态');
                }
            });
        }

        // 显示任务日志列表项的方法
        function displayTaskLogs(records) {
            const taskLogList = $('#taskLogList');
            taskLogList.empty();
            records.forEach(record => {
                taskLogList.append(`
                        <tr>
                            <td>${record.id}</td>
                            <td>${record.name}</td>
                            <td>${record.info}</td>
                            <td>${record.createTime}</td>
                        </tr>
                    `);
            });
        }

        // 显示分页导航的方法（已优化）
        function displayPagination(current, total) {
            const pagination = $('#taskLogPagination');
            pagination.empty();

            // 计算分页按钮的起始和结束位置
            const visiblePagesCount = 5; // 显示的总页数（当前页前后各2个）
            let start = Math.max(current - 2, 1); // 起始页码，保证不会小于1
            let end = Math.min(start + visiblePagesCount - 1, total); // 结束页码，保证不会超过总页数

            // 如果开始页码加可见数量小于总页数，则增加结束页码
            if (end + 1 < total) {
                pagination.append(`<li class="page-item disabled"><a class="page-link" href="#">...</a></li>`); // 在结束前添加省略号
            }

            // 循环添加分页按钮
            for (let i = start; i <= end; i++) {
                let className = '';
                if (i === current) {
                    className = 'active';
                }

                pagination.append(`            <li class="page-item ${className}">
                <a class="page-link" href="#" data-page="${i}">${i}</a>
            </li>
        `);
            }

            // 如果开始页码大于1，则在开始前添加首页按钮
            if (start > 1) {
                pagination.prepend(`<li class="page-item"><a class="page-link" href="#" data-page="1">1</a></li>`); // 首页
                pagination.prepend(`<li class="page-item"><a class="page-link" href="#" data-page="${start - 1}">上一页</a></li>`); // 上一页
            }

            // 如果结束页码小于总页数，则在结束后添加尾页和下一页按钮
            if (end < total) {
                pagination.append(`<li class="page-item"><a class="page-link" href="#" data-page="${end + 1}">下一页</a></li>`); // 下一页
                pagination.append(`<li class="page-item"><a class="page-link" href="#" data-page="${total}">${total}</a></li>`); // 尾页
            }

            // 监听分页按钮点击事件
            $('.page-item a').click(function (e) {
                e.preventDefault();
                currentPage = parseInt($(this).data('page'));
                loadTaskLogs(currentPage, searchKeyword);
            });
        }
    });
</script>
</body>
</html>
